<template>
	<view class="archives">
		<view class="archivesMessage">
			<view class="topBox">
				<image src="../../static/image/iconfool.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
				<view class="text">
					档案信息
				</view>
			</view>
			<view class="contentBox">
				<view class="contentitem">
					<view class="lable">
						中文名称
					</view>
					<view class="value">
						<input type="text" v-model="name" placeholder="中文名称" />
					</view>
				</view>
				<view class="contentitem">
					<view class="lable">
						英文名称
					</view>
					<view class="value">
						<input type="text" v-model="nickname" placeholder="英文名字" />
					</view>
				</view>
				<view class="contentitem">
					<view class="lable">
						在读学校
					</view>
					<view class="value">
						<input type="text" v-model="school" placeholder="学校名字" />
					</view>
				</view>
				<view class="contentitem">
					<view class="lable">
						在读国家
					</view>
					<view class="value">
						<input type="text" v-model="country" placeholder="在读国家" />
					</view>
				</view>
				<view class="contentitem">
					<view class="lable">
						合同起始日期
					</view>
					<view class="value" @click="startshow = true">
						<!-- <input type="text" placeholder="2023-09-08" /> -->
						{{contract_start_time == null||contract_start_time=='' ? "请选择合同起始日期" : contract_start_time}}
					</view>
				</view>
				<view class="contentitem">
					<view class="lable">
						合同结束日期
					</view>
					<view class="value" @click="endshow = true">
						{{contract_end_time == null||contract_end_time=='' ? "请选择合同结束日期" : contract_end_time}}
					</view>
				</view>
				<view class="contentitem">
					<view class="lable">
						目前年级
					</view>
					<view class="value">
						<input type="text" v-model="age" placeholder="目前年级" />
					</view>
				</view>
				<view class="contentitem" style="border-bottom: none;">
					<view class="lable">
						课程体系
					</view>
					<view class="value">
						<input type="text" v-model="course" placeholder="课程体系" />
					</view>
				</view>
			</view>
		</view>

		<view class="remarkBox">
			<view class="">
				备注
			</view>
			<view class="text" style="margin-top: 20rpx;">
				<u--textarea v-model="remark" placeholder="请输入内容"></u--textarea>
			</view>
			<view class="heng"></view>
			<view class="imgBox">
				<view v-if="remark_image.length" class="" v-for="(item,index) in remark_image">
					<image :src="item" mode="" style="width: 140rpx;height: 140rpx;"></image>
				</view>
				<image src="../../static/image/uploadImg.png" mode="" style="width: 140rpx;height: 140rpx;"
					@click="handleUploadImg"></image>
			</view>
		</view>

		<view class="" style="height: 200rpx;"></view>

		<view class="bottomContent">
			<view class="btn" @click="$u.debounce(handleSave, 500)">
				保存
			</view>
		</view>

		<u-datetime-picker :show="startshow" v-model="value1" mode="date" @cancel="startshow=false"
			@confirm="handlestarttime" :closeOnClickOverlay="true" @close="startshow = false"></u-datetime-picker>

		<u-datetime-picker :show="endshow" v-model="value1" mode="date" @cancel="endshow=false" @confirm="handleendtime"
			:closeOnClickOverlay="true" @close="endshow = false"></u-datetime-picker>

	</view>
</template>

<script>
	import {
		userinfo
	} from "@/api/api.js"
	export default {
		data() {
			return {
				pageId: "",
				name: "",
				nickname: "",
				school: "",
				country: "",
				contract_start_time: "",
				contract_end_time: "",
				age: "",
				course: "",
				remark: "",
				remark_image: null,
				startshow: false,
				value1: Number(new Date()),
				endshow: false,
			}
		},
		onLoad(options) {
			this.handleGetuserinfo()
		},
		methods: {
			async handleGetuserinfo() {
				let res = await userinfo()
				// console.log("个人信息", res)
				this.name = res.data.name
				this.nickname = res.data.nickname
				this.school = res.data.school
				this.country = res.data.country
				this.contract_start_time = res.data.contract_start_time
				this.contract_end_time = res.data.contract_end_time
				this.age = res.data.age
				this.course = res.data.course
				this.remark = res.data.remark
				this.remark_image = res.data.remark_image.split(",")
				// console.log("this.remark_image",this.remark_image)

			},
			handlestarttime(e) {
				this.contract_start_time = this.timestampToTime(e.value)
				// console.log(this.contract_start_time)
				this.startshow = false
			},
			handleendtime(e) {
				this.contract_end_time = this.timestampToTime(e.value)
				this.endshow = false
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month < 10 ? "0" + month : month
				day = day < 10 ? "0" + day : day
				// var hours = date.getHours();
				// var minutes = date.getMinutes();
				// var seconds = date.getSeconds();
				return year + "-" + month + "-" + day;
			},
			handleUploadImg() {
				let that = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log("tempFilePaths", tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'http://10.0.0.126:10030/api/index/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									// console.log("图片路径//////", JSON.parse(uploadFileRes.data).data);
									// console.log("111111111",that.remark_image)
									if (that.remark_image.length >= 9) {
										uni.showToast({
											title: '最多可上传9张图片！',
											duration: 1000,
											icon: "none",
										});
									} else {
										that.remark_image.push(JSON.parse(uploadFileRes.data).data)
										// console.log("that.imgs", that.imgs);
									}
								},
								fail(e) {
									// console.log("上传图片", e)
								}
							});
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.archives {
		.archivesMessage {
			width: 690rpx;
			height: 712rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			position: relative;

			.topBoximg {
				width: 690rpx;
				height: 92rpx;
				position: absolute;
				top: 0;
				bottom: 0;
			}

			.topBox {
				width: 100%;
				height: 92rpx;
				padding: 22rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.text {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #255A9B;
					line-height: 32rpx;
					margin-left: 20rpx;
				}
			}

			.contentBox {
				padding: 0 20rpx;
				box-sizing: border-box;

				.contentitem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 76rpx;
					border-bottom: 1rpx solid #F4F4F7;

					.lable {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #212121;
						line-height: 28rpx;
					}

					.value {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #999996;
						line-height: 28rpx;
					}

					input {
						text-align: right;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						line-height: 28rpx;
						color: #999996;
					}
				}
			}
		}

		.remarkBox {
			width: 690rpx;
			// height: 288rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.text {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #212121;
				line-height: 30rpx;
			}

			.heng {
				width: 650rpx;
				height: 1rpx;
				background-color: #F4F4F7;
				margin: 28rpx 0;
			}
		}

		.bottomContent {
			width: 100%;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);

			.btn {
				width: 630rpx;
				height: 88rpx;
				background: #255A9B;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				margin: 0 auto;
			}
		}

	}
</style>